<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>实物管理</title>



	<!-- <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script> -->

	<!--	  引入vue.js  因为Element UI 依赖vue -->
	<script src="../static/js/vue.js"></script>
	<script src="../static/js/axios.js"></script>
	<link rel="stylesheet" href="../static/elementui/theme-chalk/index.css" />
	<script src="../static/elementui/index.js"></script>
	<style>
		.pagechose{
			float: right;
		}
	</style>
</head>
<body>

<div id="app" class="container">

	<el-row>
		<div style="float: left;">
			<el-button type="primary" @click="showAddStu">创建实物</el-button>
		</div>

	</el-row>
	<el-divider></el-divider>
	名称：<el-input placeholder="请输入商品名称" style="width: 200px;" v-model="ruleForm.goodsName"></el-input>
	编号：<el-input placeholder="请输入编号" style="width: 200px;" v-model="ruleForm.goodsNo"></el-input>
	创建时间： <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.createTime">
</el-date-picker>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<el-button type="primary" size="small" @click="find()">查询</el-button>
	&nbsp;&nbsp;&nbsp;
	<el-button type="primary" size="small" @click="resetForm1()">重置</el-button>
	<el-divider></el-divider>

	<!-- 新建模态框 -->
	<el-dialog title="创建实物" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
		<!--
:model="formData": 关联数据
:rules: 关联校验规则
ref： 在获取表单对象时使用
-->
		<el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="名称:" prop="name">
				<el-input v-model="formData.name" placeholder="最多输入40个字"></el-input>
			</el-form-item>
			<el-form-item label="价格:" prop="price">
				<el-input v-model="formData.price" type="text" placeholder="元"></el-input>
			</el-form-item>
			<el-form-item label="快递费用" prop="type">
				<!--				<el-radio-group>-->
				<el-radio label="0" v-model="formData.type">包邮</el-radio>
				<br>
				<el-radio label="1" v-model="formData.type">统一邮费</el-radio>

				<el-input v-model="formData.postage" type="text" placeholder="元" style="width: 100px;"></el-input>
				<!--				</el-radio-group>-->
			</el-form-item>
			<el-form-item align="right">
				<el-button type="primary" @click="addStu()">添加</el-button>
				<el-button @click="resetForm('addForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>





	<table class="table" style="text-align: center; width: 100%" :data="rows">
		<thead>
		<tr>
			<th style="display: none;">序号</th>
			<th>编号</th>
			<th>创建时间</th>
			<th>名称</th>
			<th>价格</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="(p,index) in rows" :key="index" style="height: 50px">
			<td style="display: none;">{{p.index}}</td>
			<td>{{p.goodsNo}}</td>
			<td :formatter="formatDate">{{p.uploadTime}}</td>
			<td>{{p.goodsName}}</td>
			<td>{{p.marketPrice}}</td>
			<el-row>
				<td :class="'text-center'">
					<!-- 方法不能定义为delete ，因为这玩意是关键字-->
					<el-button type="primary" size="mini" @click="compile(index)">编辑</el-button>
					<el-button type="primary" size="mini" @click="del(index)">删除</el-button>
				</td>
			</el-row>
		</tr>
		</tbody>
	</table>

	<!-- 修改模态框 -->
	<el-dialog title="修改实物" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
		<!--
:model="formData": 关联数据
:rules: 关联校验规则
ref： 在获取表单对象时使用
-->
		<el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="名称:" prop="name">
				<el-input v-model="formData.name" placeholder="最多输入40个字"></el-input>
			</el-form-item>
			<el-form-item label="价格:" prop="price">
				<el-input v-model="formData.price" type="text" placeholder="元"></el-input>
			</el-form-item>
			<el-form-item label="快递费用" prop="type">
				<el-radio label="0" v-model="formData.type">包邮</el-radio>
				<br>
				<el-radio label="1" v-model="formData.type">统一邮费</el-radio>

				<el-input v-model="formData.postage" type="text" placeholder="元" style="width: 100px;"></el-input>
			</el-form-item>
			<el-form-item align="right">
				<el-button type="primary" @click="upEntity()">保存</el-button>
				<el-button @click="stu()">取消</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>

	<!--分页展示-->
	<div class="pagechose">
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
					   :page-sizes="[5, 15, 30, 50]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</div>
</body>

<script>
	let allEntity = []
	let entityId
	let app = new Vue({
		el: "#app",
		data: {
			ruleForm: {
				goodsName: "",
				goodsNo: "",
				createTime: ""
			},


			/*分页参数*/
			total: 0,
			size: 5,
			page: 1,
			/*分页参数*/
			rows: [],
			dialogTableVisible4add: false, //添加窗口显示状态
			dialogTableVisible4edit: false, //编辑窗口显示状态
			formData: {
				name: "",
				price: "",
				postage: "",
				type: ""
			}, //添加表单的数据
			rules: {
				name: [{
					required: true,
					message: '名称',
					trigger: 'blur'
				}, {
					min: 2,
					max: 40,
					message: '长度在 2 到 40 个字符',
					trigger: 'blur'
				}],
				price: [{
					required: true,
					message: '价格',
					trigger: 'blur'
				}, {
					min: 1,
					max: 40,
					message: '请输入价格',
					trigger: 'blur'
				}],
				type: [{
					required: true,
					message: '请选择邮递方式',
					trigger: 'change'
				}],
			},
		},
		mounted() {
			axios.get("[[@{/goods/entity}]]")
					.then(res => { //此处一定要用 箭头函数  不然this 就不是this
						console.info(res)
						console.info(res.data.data)
						allEntity = res.data.data
						app.$data.total = allEntity.length
						for (let i = 0; i < 5; i++) {
							if (i < allEntity.length) {
								app.$data.rows.push(allEntity[i])
							}
						}
					});
		},
		methods: {
			//时间格式化
			formatDate: function(row, column) {
				// 获取单元格数据
				let data = row[column.property]
				// if (this.$MyComm.isEmpty(data)) {
				// 	return ''
				// }
				let dt = new Date(data)
				return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() +
						':' + dt.getSeconds()
			},

			/*分页方法*/
			handleSizeChange: function(val) {
				this.size = val
				this.page = 1
				this.rows = []
				if (this.total >= val) {
					for (let i = 0; i < val; i++) {
						this.rows.push(allEntity[i])
					}
				} else {
					for (let i = 0; i < this.total; i++) {
						this.rows.push(allEntity[i])
					}
				}
			},
			handleCurrentChange: function(val) {
				let size = this.size
				this.rows = []
				if (val * size > this.total) {
					for (let i = size * (val - 1); i < this.total; i++) {
						this.rows.push(allEntity[i])
					}
				} else {
					for (let i = size * (val - 1); i < size * val; i++) {
						this.rows.push(allEntity[i])
					}
				}
			},
			/*分页方法*/

			/* 编辑 */
			compile: function(index) {
				//弹出窗口
				this.dialogTableVisible4add = true;
				console.info(this.rows[index])
				this.formData.name = this.rows[index].goodsName
				this.formData.price = this.rows[index].marketPrice
				this.formData.postage = this.rows[index].postage
				this.formData.type = this.rows[index].expressType
				entityId = this.rows[index].id
			},

			/*退出修改模态框*/
			stu: function() {
				//弹出窗口
				this.dialogTableVisible4add = false;
			},
			/*修改实物信息*/
			upEntity: function(index) {

				axios.get("[[@{/goods/upEntity}]]", {
					params: {

						id: entityId,
						goodsName: this.formData.name,
						marketPrice: this.formData.price,
						postage: this.formData.postage,
						expressType: this.formData.type,
					},
				}).then(function(res) {
					console.info(res)
					console.info(res.data)
				});
				//关闭添加窗口
				this.dialogTableVisible4add = false;
			},

			/*删除弹框*/
			del:function(inedx) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.del1(inedx)
					this.total=this.total-1
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//

			/* 删除 */
			del1: function(index) {
				let delId = this.rows[index].id
				axios.get("[[@{/goods/del}]]", {
					params: {
						delId: delId
					}
				}).then(res => { //此处一定要用 箭头函数  不然this 就不是this
					console.info(res)
					console.info(res.data.data)
					this.rows.splice(index, 1)
				});
			},

			resetForm(addForm) {
				//双向绑定，输入的数据都赋值给了formData， 清空formData数据
				this.formData = {};
				//清除表单的校验数据
				this.$refs[addForm].resetFields();
			},

			/**/

			/* 查询 */
			find: function() {
				axios.get("[[@{/goods/findEntity}]]", {
					params: {
						goodsName: this.ruleForm.goodsName,
						goodsNo: this.ruleForm.goodsNo,
						createTime: this.ruleForm.createTime,
					},
				}).then(function(res) {
					console.info(res)
					console.info(res.data)
					allEntity = res.data.data
					app.$data.rows = []
					app.$data.total = allEntity.length
					for (let i = 0; i < 5; i++) {
						if (i < allEntity.length) {
							app.$data.rows.push(allEntity[i])
						}
					}
				});
			},
			/* 重置 */
			resetForm1: function() {
				//重置person对象
				this.ruleForm = {
					goodsName: "",
					goodsNo: "",
					createTime: ""
				}
			},
			showAddStu() {
				//弹出窗口
				this.dialogTableVisible4add = true;
			},
			//添加实物功能
			addStu() {
				axios.get("[[@{/goods/addEntity}]]", {
					params: {
						goodsName: this.formData.name,
						marketPrice: this.formData.price,
						postage: this.formData.postage,
						expressType: this.formData.type,
					},
				}).then(function(res) {
					console.info(res)
					console.info(res.data)
				});
				//关闭添加窗口
				this.dialogTableVisible4add = false;
			},
			resetForm(addForm) {
				//双向绑定，输入的数据都赋值给了formData， 清空formData数据
				this.formData = {};
				//清除表单的校验数据
				this.$refs[addForm].resetFields();
			},
		},
	})
</script>
</html>
